import React, { useEffect } from 'react';
import { Modal, Form, Input, Select, Switch, InputNumber, TreeSelect } from 'antd';
import type { Menu, MenuCreateParams, MenuUpdateParams } from '@/api/system';

const { Item: FormItem } = Form;
const { Option } = Select;
const { TextArea } = Input;

interface MenuFormProps {
  visible: boolean;
  menu?: Menu | null;
  menuTreeData: any[];
  onSubmit: (values: MenuCreateParams | MenuUpdateParams) => void;
  onCancel: () => void;
}

const MenuForm: React.FC<MenuFormProps> = ({ visible, menu, menuTreeData, onSubmit, onCancel }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible && menu) {
      form.setFieldsValue({
        pid: menu.pid,
        name: menu.name,
        icon: menu.icon,
        path: menu.path,
        component: menu.component,
        redirect: menu.redirect,
        permission: menu.permission,
        type: menu.type,
        visible: menu.visible,
        status: menu.status,
        sort: menu.sort,
        remark: menu.remark,
      });
    } else if (visible) {
      form.resetFields();
    }
  }, [visible, menu, form]);

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onSubmit(menu ? { ...values, id: menu.id } : values);
    } catch (error) {
      // 静默处理表单验证失败
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title={menu ? '编辑菜单' : '新增菜单'}
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      width={800}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        requiredMark={false}
      >
        <FormItem
          name="pid"
          label="上级菜单"
          rules={[{ required: true, message: '请选择上级菜单' }]}
        >
          <TreeSelect
            placeholder="请选择上级菜单"
            treeData={[
              {
                title: '顶级菜单',
                value: 0,
                key: 0,
                children: menuTreeData,
              },
            ]}
            allowClear
            showSearch
            treeDefaultExpandAll
            treeNodeFilterProp="title"
          />
        </FormItem>

        <FormItem
          name="type"
          label="菜单类型"
          rules={[{ required: true, message: '请选择菜单类型' }]}
        >
          <Select placeholder="请选择菜单类型">
            <Option value="M">目录</Option>
            <Option value="C">菜单</Option>
            <Option value="F">按钮</Option>
          </Select>
        </FormItem>

        <FormItem
          name="name"
          label="菜单名称"
          rules={[
            { required: true, message: '请输入菜单名称' },
            { min: 2, max: 50, message: '菜单名称长度在2-50个字符之间' }
          ]}
        >
          <Input placeholder="请输入菜单名称" />
        </FormItem>

        <FormItem
          name="sort"
          label="显示排序"
          rules={[{ required: true, message: '请输入显示排序' }]}
        >
          <InputNumber placeholder="请输入显示排序" min={0} max={999} style={{ width: '100%' }} />
        </FormItem>

        <FormItem
          name="icon"
          label="图标"
        >
          <Input placeholder="请输入图标" />
        </FormItem>

        <FormItem
          name="path"
          label="路由地址"
          rules={[{ required: true, message: '请输入路由地址' }]}
        >
          <Input placeholder="请输入路由地址" />
        </FormItem>

        <FormItem
          name="component"
          label="组件路径"
          dependencies={['type']}
        >
          <Input placeholder="请输入组件路径" />
        </FormItem>

        <FormItem
          name="redirect"
          label="重定向地址"
        >
          <Input placeholder="请输入重定向地址" />
        </FormItem>

        <FormItem
          name="permission"
          label="权限标识"
        >
          <Input placeholder="请输入权限标识" />
        </FormItem>

        <FormItem
          name="visible"
          label="显示状态"
          valuePropName="checked"
        >
          <Switch checkedChildren="显示" unCheckedChildren="隐藏" />
        </FormItem>

        <FormItem
          name="status"
          label="菜单状态"
          valuePropName="checked"
        >
          <Switch checkedChildren="正常" unCheckedChildren="停用" />
        </FormItem>

        <FormItem
          name="remark"
          label="备注"
        >
          <TextArea placeholder="请输入备注" rows={4} />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default MenuForm;